<template>
	<view>
		<!-- 头部提示 -->
		<navbar :backshow="false" :title="title" :navBarHeight="navBarHeight" :menuRight="menuRight" :menuTop="menuTop"
			:menuHeight="menuHeight"></navbar>

		<!-- 头部展位 -->
		<view class="main" :style="{ height: mainheight + 'px' }">123</view>

		<!-- 预约box -->
		<view class="vybox">
			<view class="vyboxitem" @click="roombookfn">
				<view class="fjicon">
					<img src="/static/fjicon.png" alt="" />
				</view>
				<view class="vydes">
					<view class="vytitle">预约房间</view>
					<view class="vtti">点击进行预约房间</view>
				</view>
				<view class="startiocn">
					<img src="/static/fjstart.png" alt="" />
				</view>
			</view>
			<view class="vyboxitem vyboxitems" @click="devbookfn">
				<view class="fjicons">
					<img src="/static/devicon.png" alt="" />
				</view>
				<view class="vydes">
					<view class="vytitle">预约设备</view>
					<view class="vtti">点击进行预约设备</view>
				</view>
				<view class="startiocn">
					<img src="/static/sbstart.png" alt="" />
				</view>
			</view>
		</view>

		<!-- 数据概览 -->
		<view class="tjbox">
			<view class="tjtitle">数据统计</view>
			<view class="charts-boxs">
				<qiun-data-charts type="bar" :opts="opts" :chartData="chartData" />
			</view>
		</view>
		<!-- 通知公告 -->
		<view class="notboxicon" @click="tzgg">
			<image src="../../static/tzggicon.png" mode=""></image>
		</view>
		<!-- tab切换 -->

		<!-- <view class="tabbox" v-show="tabshow">
			<view class="tabboxitem" :class="{ 'active': activeTab === 0 }" @click="setActiveTab(0)">
				预约选择
			</view>

			<view class="tabboxitem" :class="{ 'active': activeTab === 1 }" @click="setActiveTab(1)">
				预约记录
			</view> -->

		<!-- 下划线标识 -->
		<!-- <view class="underline" :style="{ left: underlineLeft }"></view>
		</view> -->

		<!-- 根据当前选中的Tab显示内容 -->
		<!-- <view v-show="activeTab === 0 && tabshow">
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus"
				@input="input" @cancel="cancel" @clear="clear">
			</uni-search-bar> -->
		<!-- 正文 -->
		<!-- <view class="roombox">
				<view class="roomitem" v-for="item in roomList" :key="item.roomId"
					@click="roombooking(item.roomId,single)">
					{{item.roomName}}
				</view>

			</view>

			<view class="datamain"> -->
		<!-- 显示今日有多少人预约 -->
		<!-- <view class="dataylbox">
					{{single}} 今天  有{{roombooking.length}}人想预约，查看一下时间段
				</view>
				<view class="datedbox"> -->
		<!--  -->
		<!-- <view class="single">
					{{single}}
				</view> -->
		<!-- <uni-icons type="back" size="22" @click="dateback"></uni-icons>
					<uni-datetime-picker v-model="single" type="date" class="sing"
						ref="calendar">{{single}}</uni-datetime-picker>
					<uni-icons type="forward" size="22" @click="datenext"></uni-icons>
					<view class="rlbox" @click="open">
						<view class="rlboximage">
							<image src="/static/rl.png" alt="" class="rlboximage" />
						</view>
						<view class="rl">
							日历
						</view>
					</view>

				</view> -->
		<!-- 选择 详细日期 -->
		<!-- <view class="datetimebox">
					<view class="datetimeitem" v-for="item in datetime" :key="item.id" @click="activetimeidfn(item)">
						<view class="datetime">
							{{item.starttime}} - {{item.endtime}}
						</view>
						<view class="dateacitve"
							:class="[item.disable == false ? 'dateacitvebk':'',item.id==dateactiveid ? 'dateacitveyx':'dateacitve']"> -->
		<!-- 已选择的时候进行提示 -->
		<!-- <image src="../../static/yx.png" mode="" class="dateacitveimg"
								v-if="item.id==dateactiveid&&item.disable==true"></image>
						</view>
					</view>
				</view> -->
		<!-- 提示 + 下一步 -->
		<!-- <view class="datebottombox">
					<view class="datebsitem">
						<view class="datebsitemla">
						</view>
						<view class="dateibstemdes">
							：可选择
						</view>
					</view>
					<view class="datebsitem">
						<view class="datebsitemlas">
						</view>
						<view class="dateibstemdes">
							：已选择
						</view>
					</view>
					<view class="datebsitem">
						<view class="datebsitemlass">
						</view>
						<view class="dateibstemdes">
							：不可选
						</view>
					</view>
				</view> -->
		<!-- 下一步 -->
		<!-- <view class="nextbox">
					下一步
				</view>
			</view>

		</view>
		<view v-show="activeTab === 1 && tabshow"> -->
		<!-- 预约记录内容 -->
		<!-- </view> -->
		<!-- 底部导航 -->
		<view class="zwdb"></view>
		<tabar current="1"></tabar>
		<!-- 提示弹出 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="msgType" cancelText="关闭" confirmText="确定" title="通知"
				content="当前系统正在维护,无法预约!"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="alertDialogs" type="dialog">
			<uni-popup-dialog type="msgType" cancelText="关闭" confirmText="确定" title="提示"
				content="您的信用分值低于10暂时无法预约!"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="alertDialogsd" type="dialog" class="mg">
			<uni-popup-dialog type="msgType" cancelText="关闭" confirmText="确定" title="提示"
				content="暂未开启访客预约!"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "预约",
				navBarHeight: 0, // 导航栏高度
				menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
				menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
				menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
				mainheight: 0,
				chartData: {},

				opts: {
					dataLabel: false,
					color: ["#5ADCA5", "#1371FF", "#FE811A", ],
					padding: [15, 15, 0, 5],
					enableScroll: false,

					legend: {
						position: 'top',

					},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						min: 0,
						axisLine: false,
						max: 20
					},
					yAxis: {

					},
					// xAxis: {
					// 	disableGrid: true,


					// },
					// yAxis: {
					// 	showTitle: true,

					// 	data: [

					// 		{
					// 			min: 0,
					// 			title: '个',


					// 		}
					// 	]
					// },
					extra: {
						column: {
							type: "stack",
							width: 30,
							fontSize: 0,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							labelPosition: 'center',


						},
						tooltip: {
							showBox: true,
							showArrow: false,
							showCategory: false,
							legendShow: false,
							legendShow: false,
							borderRadius: 5,
							bgOpacity: 0.6
						},
					}
				}
			}
		},
		onLoad() {
			const that = this;
			// 获取系统信息
			const systemInfo = wx.getSystemInfoSync();
			// 胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			// 导航栏高度 = 状态栏高度 + 44
			that.navBarHeight = systemInfo.statusBarHeight + 44;
			that.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
			that.menuTop = menuButtonInfo.top;
			that.menuHeight = menuButtonInfo.height;
			that.mainheight = menuButtonInfo.top + menuButtonInfo.height;

		},

		onReady() {
			this.getServerData();

		},
		methods: {
			tzgg() {
				uni.navigateTo({
					url: '/pages/noticelist/noticelist' // 要跳转的非 tabBar 页面路径，可以带参数
				});
			},
			//预约room房间 先进行查询
			roombookfn() {
				// 先查询是否开启访客预约
				this.$myRequest({
					url: "/client/appointmentUser/userInfo",
					method: "GET",
				}).then((res) => {
					console.log('查询是不是访客身份', res.data);
					if (res.data.userType == 'VISITOR') {
						this.$myRequest({
							url: "/admin/appointment/room/getVisitorDisabled",
							method: "GET",
						}).then((res) => {
							console.log('查询是否开启访客预约', res.data);
							if (!res.data) {
								this.gorooking()
							} else {
								this.$refs.alertDialogsd.open();
							}

						})
					} else {
						this.gorooking()
					}

				})

			},
			gorooking() {
				// 查询一下
				this.$myRequest({
					url: "/admin/appointment/room/appointmentDisabled",
					method: "GET",
				}).then((res) => {
					console.log("查询全局开关", res.data);
					if (res.data.disabled == 1) {
						this.$myRequest({
							url: "/client/appointmentUser/userInfo",
							method: "GET",
						}).then((res) => {
							console.log("当前信用分", res.data.userCredit);
							if (res.data.userCredit < 10) {
								this.$refs.alertDialogs.open();
							} else {
								uni.navigateTo({
									url: "/pages/roombook/roombook", // 要跳转的非 tabBar 页面路径，可以带参数
								});
							}
						});
					}
					if (res.data.disabled == 9) {
						this.$refs.alertDialog.open();
					}
				});
			},
			devbookfn() {
				// 先查询是否开启访客预约
				this.$myRequest({
					url: "/client/appointmentUser/userInfo",
					method: "GET",
				}).then((res) => {
					console.log('查询是不是访客身份', res.data);
					if (res.data.userType == 'VISITOR') {
						this.$myRequest({
							url: "/admin/appointment/room/getVisitorDisabled",
							method: "GET",
						}).then((res) => {
							console.log('查询是否开启访客预约', res.data);
							if (!res.data) {
								this.godevbooking()
							} else {
								this.$refs.alertDialogsd.open();
							}

						})
					} else {
						this.godevbooking()
					}

				})

			},
			godevbooking() {
				// 查询一下
				this.$myRequest({
					url: "/admin/appointment/room/appointmentDisabled",
					method: "GET",
				}).then((res) => {
					console.log("查询全局开关", res.data);
					if (res.data.disabled == 1) {
						this.$myRequest({
							url: "/client/appointmentUser/userInfo",
							method: "GET",
						}).then((res) => {
							console.log("当前信用分", res.data.userCredit);
							if (res.data.userCredit < 10) {
								this.$refs.alertDialogs.open();
							} else {
								uni.navigateTo({
									url: "/pages/devbook/devbook",
									// 要跳转的非 tabBar 页面路径，可以带参数
								});
							}
						});
					}
					if (res.data.disabled == 9) {
						this.$refs.alertDialog.open();
					}
				});
			},
			getServerData() {
				this.$myRequest({
					url: "/client/appointmentStatistics/audit",
					method: "GET",
				}).then((res) => {
					console.log("返回数据", res);
					if (res.code == 200) {
						let maxField = '';
						let maxValue = -Infinity;

						for (const key in res.data) {
							if (res.data[key] > maxValue) {
								maxValue = res.data[key];
								maxField = key;
							}
						}
						console.log(`数值最大的字段是 ${maxField}，其值为 ${maxValue}。`);
						if (maxValue >= 20) {
							this.opts.xAxis.max = maxValue + 1
						}
						// this.yldata = res.data;
						let series = [{
								name: "审核通过",
								textColor: "#FFFFFF",
								data: [
									res.data.roomAppointmentPassNumber, res.data
									.deviceAppointmentPassNumber
								]
							},
							{
								name: "审核未通过",
								textColor: "#FFFFFF",
								data: [res.data.roomAppointmentNoPassNumber, res.data
									.deviceAppointmentNoPassNumber
								]
							},
							{
								name: "待审核",
								textColor: "#FFFFFF",
								data: [res.data.roomAppointmentNumber, res.data
									.deviceAppointmentNumber
								]
							},
							{
								name: "已过期",
								textColor: "#FFFFFF",
								data: [
									res.data.roomAppointmentOverdueNumber,
									res.data.deviceAppointmentOverdueNumber,
								],
							},
						]

						let resd = {
							categories: ["房间预约", "设备预约"],
							series: series
						};
						this.chartData = JSON.parse(JSON.stringify(resd));
					}
				});


			},
		}
	}
</script>

<style></style>